<!-- 悬浮管理 -->
<template>
       <!-- <el-button type="primary" @click="add('add')" style="margin-bottom: 10px;">新增</el-button> -->

    <el-table :data="data.tableData" row-key="id" table-layout="auto" style="width: 100%">
      <el-table-column prop="id" label="三方平台id"    width="100"/>
      <el-table-column prop="name" label="三方平台名称"  width="150"/>
      <!-- <ma-dict-column prop="icon" label="三方平台图标地址" dict-type="link_type"    width="150"></ma-dict-column> -->
      <el-table-column prop="qrCode" label="三方平台二维码地址"    width=""/>
      <el-table-column prop="path" label="平台地址"  width="" />
      <el-table-column prop="creator" label="创建人"  width="120" />
      <el-table-column prop="createTime" label="创建时间"  width="150" />
      <el-table-column prop="updater" label="修改人"  width="120" />
      <el-table-column prop="updateTime" label="修改时间"  width="150" />
      <el-table-column prop="" label="操作"  width="200" fixed="right">
        <template #default="scope">
          <el-button  type="primary" @click="add('edit',scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteColumn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList" @current-change="getList" style="margin-top: 20px;display:flex;justify-content: flex-end;" />
    <SuspendFrom ref="dialogFormRef" @resetList="getList"></SuspendFrom>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, onMounted, nextTick } from 'vue'
  import { listLink, editLink, deleteLink ,sangetList,sandelete} from '@/api/allApi'
  import SuspendFrom  from './SuspendFrom.vue'
  import { ElMessage, ElMessageBox } from 'element-plus/es'
  
  // let tableData = reactive([])
  const pageNum = ref(1) //第几页
  const pageSize = ref(10) //每页多少条
  const total = ref(0) //总条数

//   获取页面有多少条数据
  const addpagenum = ref(0)
  
  const rows = ref([]); // 用于存储所有行的数据
  const data = reactive({
      tableData: []
  })
  
  onMounted(() => {
      getList()
  })
  
  const searchs=()=>{
     console.log("搜索")
        
        }


// 初始化  获取数据
  const getList = () => {
    sangetList({
          websiteId: Number(localStorage.getItem('WebsiteId')), //网站id 1：鞍钢官网 2：博物馆
          page: pageNum.value,
          size: pageSize.value
      }).then((res: any) => {
        // console.log(res.data.length,'asadadadqqqqqqqqqqqqqqqqqqq')  

        addpagenum.value = res.data.length

          if (res.code === 0) {
              data.tableData = res.data
              total.value = res.data.total
          } else {
              ElMessage.success(res.msg)
          }
      })
  }

  const switchChange = (row: any) => {
      editLink({
          id: row.id,
          status: row.status
      }).then(res => {
          if (res.code === 0) {
              ElMessage.success('操作成功')
              getList()
          } else {
          }
      })
  }
  const dialogFormRef = ref()

const add = (type, row = null) => {
      if (type === 'add') {
        if (addpagenum.value < 4) {
          // 新增项目，增加计数器
          addpagenum.value++;
          // 假设 init 方法会处理新增逻辑，如打开对话框并初始化表单
          dialogFormRef.value.init(type, null);
        } else {
          ElMessage.error("最多可添加四条，请先删除多余信息。");
        }
      } else if (type === 'edit') {
        // 编辑项目，不增加计数器
        dialogFormRef.value.init(type, row);
      }
    }

  const deleteColumn = (row: any) => {
      ElMessageBox.confirm(`确定删除吗？`, '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        sandelete(row.id).then((res: any) => {
              if (res.code === 0) {
                  ElMessage.success('删除成功')
                  getList()
              } else {
                  ElMessage.error(res.msg)
              }
          })
      })
  }
  </script>
  
  <style lang="scss" scoped>
  //搭配el-table里的table-layout="auto"属性，再让每一列里的width为空即可展现出适应表格内容的列宽
  :deep(.el-table .cell) {
      width: max-content;
      display: inline-block;
  }
  </style>
  